<template>
  <el-dialog
    class="set-model-config-modal"
    append-to-body
    title="设置模型配置"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(700)"
    :before-close="handleClose">
    <div class="content">
      <div class="row">
        <div class="col">
          <span class="label">经度：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入经度" v-model="lng"></el-input-number>
          </div>
        </div>
        <div class="col">
          <span class="label">纬度：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入纬度" v-model="lat"></el-input-number>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <span class="label">基点x：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入经度" v-model="pointX"></el-input-number>
          </div>
        </div>
        <div class="col">
          <span class="label">基点y：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入纬度" v-model="pointY"></el-input-number>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <span class="label">标高（米）：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入标高（米）" v-model="height"></el-input-number>
          </div>
        </div>
        <div class="col">
          <span class="label">弧度：</span>
          <div class="input-content">
            <el-input-number :controls="false" placeholder="请输入弧度" v-model="radian"></el-input-number>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 经度
      lng: undefined,
      // 纬度
      lat: undefined,
      // 基点x
      pointX: undefined,
      // 基点y
      pointY: undefined,
      // 标高
      height: undefined,
      // 弧度
      radian: undefined
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.lng = undefined;
        this.lat = undefined;
        this.pointX = undefined;
        this.pointY = undefined;
        this.height = undefined;
        this.radian = undefined;
      }
    },
    options: {
      deep: true,
      handler(val) {
        if (val) {
          this.lng = val.lng;
          this.lat = val.lat;
          this.pointX = val.pointX;
          this.pointY = val.pointY;
          this.height = val.height;
          this.radian = val.radian;
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('cancel', false);
    },
    handleSubmit() {
      const params = {
        lng: this.lng,
        lat: this.lat,
        pointX: this.pointX,
        pointY: this.pointY,
        height: this.height,
        radian: this.radian,
      };
      const hasEmpty = Object.keys(params).some(key => {
        const val = params[key];
        return val !== 0 && !val;
      });
      if (hasEmpty) {
        this.$message.warning('请完善信息');
        return;
      }
      this.$emit('submit', params);
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";

  .set-model-config-modal {
    .content {
      width: 100%;
      min-height: 200px;
      padding: 20px;
      .row {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 30px;
        .col {
          width: 50%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .label {
            width: 120px;
            text-align: right;
            padding-right: 10px;
            color: $mainColor;
          }
          .input-content {
            flex: 1;
          }
        }
      }
    }
  }
</style>
